@import '../../style/mixin.scss';

.powerDetail {
    background-color: #fff;

    .powerDetail-title {
        border-bottom: 1px solid #eee;

        h3 {
            @include font(20px, #000);
            margin       : 0 0 0 20px;
            display      : inline-block;
            border-bottom: 2px solid $blue;
        }

        span {
            @include font(14px, #808080);
        }
    }

    .detail {
        padding: 20px 20px 40px;

        h3 {
            @include font(16px, #000);
            margin-bottom: 5px;
        }

        .detail-text {
            @include font(12px, #808080);
            margin-bottom: 20px;
            line-height  : 26px;
        }
    }

    .detail-row {
        padding: 10px 0;
        @include font(14px, #808080);

        p {
            display   : inline-block;
            width     : 100px;
            text-align: right;
        }

        span {
            @include font(14px, #000);
        }

        big {
            @include font(18px, #000);
        }


        .question-icon {
            @include font(18px, #808080);
            margin-left: 10px;
        }

        .sure-btn {
            @include flex();
            @include font(16px, #fff);
            width      : 250px;
            height     : 50px;
            margin-left: 100px;

            span {
                color: #fff;
            }
        }

    }

    .input-number {
        position: relative;
    }

    .input-sub {
        margin-left: -55px;
        position   : absolute;
        line-height: 34px;
    }

    .pay-item {
        @include flex();
        display: inline-flex;
        border : 1px solid #eee;
        padding: 8px 20px;
        margin : 0 10px;
        cursor : pointer;

        img {
            width       : 24px;
            margin-right: 10px;
        }
    }

    .pay-item-active {
        @extend .pay-item;
        background-image: url(../../assets/img/select-box.png);
        background-size : 100% 100%;
    }

    .detail-box {
        background-color: rgba(63, 144, 250, 0.1);
        border          : 1px solid $blue;
        padding         : 20px 0;
        border-radius   : 50px;
    }

    .detail-box-item {
        @include flex();
        flex-direction: column;

        p {
            @include font(14px, #000);
            margin: 0;
        }

        .title {
            @include font(14px, #808080);
        }
    }

    .detail-chart {
        width      : 48%;
        margin     : 20px 0;
        padding-top: 20px;
        border     : 1px solid #eee;

        p {
            @include flex();
            @include font(14px, #000, center);
            width: 100%;
        }

        span {
            @include font(14px, #F8B657);
            padding-left: 5px;
        }
    }

    .detail-fun {
        @include flex(center, flex-start);
        padding         : 20px 30px;
        flex-direction  : column;
        background-color: #F7F7F7;

        h3 {
            @include font(16px, #000);
        }

        p {
            @include font(12px, #808080);
            margin     : 0;
            line-height: 26px;
        }
    }

    .load-box {
        padding-top: 96px;
    }

}